<template>
  <div class="page-container">
    <div class="page-breadcrumb">
      <div class="left">
        <router-link to="/main">
          <div class="back">
            <img src="@/assets/images/back_icon.png" alt="返回按钮" />
          </div>
        </router-link>
        <div class="text">知识库</div>
      </div>
      <div class="s-input">
        <input
          type="text"
          v-model="searchData.keywords"
          placeholder="请输入名称搜索"
        />
        <img
          src="@/assets/images/search.png"
          alt="搜索按钮"
          @click="searchSub"
        />
      </div>
    </div>
    <div class="page-first-tabs">
      <div class="tabs-box">
        <ul>
          <li
            :class="{ active: item.id == thisfirstTypeId }"
            @click="typeClick(item, 'first')"
            v-for="item in firstKnowType"
            :key="item.id"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="add-btn" @click="addKnowledge">
        <img src="@/assets/images/add_btn.png" alt="" />
      </div>
    </div>
    <div class="page-content">
      <div class="left">
        <ul class="second-search-ul">
          <li
            :class="{ active: item.id == thissecondTypeId }"
            @click="typeClick(item, 'second')"
            v-for="item in secondKnowType"
            :key="item.id"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="table-list">
        <div class="table-title">
          <span class="bread" v-show="thisfirstTypeName">{{
            thisfirstTypeName
          }}</span>
          <span
            class="bread"
            v-show="thisfirstTypeName && thissecondTypeName"
            >{{ "> " }}</span
          >
          <span class="bread" v-show="thissecondTypeName">{{
            thissecondTypeName
          }}</span>
        </div>
        <div class="search-thred-box">
          <el-select
            v-model="thisthirdTypeId"
            @change="thredSelChange"
            placeholder="请选择"
          >
            <el-option
              v-for="item in thirdKnowType"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div class="table-box">
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column type="index" label="序号" align="center">
            </el-table-column>
            <el-table-column
              prop="file_code"
              label="文件代号"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="file_name"
              label="文件名称"
              align="center"
            >
              <template v-slot="{ row }">
                <a href="javascript:;" @click="openFile(row)">{{ row.file_name }}</a>
              </template>
            </el-table-column>
            <el-table-column
              prop="version"
              label="版本号"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="create_time"
              label="发布时间"
              align="center"
            ></el-table-column>
            <el-table-column prop="download" label="下载" align="center">
              <template v-slot="{ row, $index }">
                <div class="btn-list">
                  <el-button
                    class="btn-text"
                    type="text"
                    @click="downloadHandle(row, $index)"
                    >下载</el-button
                  >
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="video" label="播放" align="center">
              <template v-slot="{ row }">
                <div class="btn-list">
                  <img
                    v-if="row.file_type == 1"
                    src="@/assets/images/play-video.png"
                    class="play-video"
                    @click="openFile(row)"
                    alt=""
                  />
                  <span v-else>-</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="remark1"
              label="备注1"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="remark2"
              label="备注2"
              align="center"
            ></el-table-column>
            <el-table-column label="操作" width="100" align="center">
              <template slot-scope="scope">
                <div
                  class="option-icon del"
                  @click="delKnowledge(scope.row.id)"
                >
                  删除
                </div>
                <div
                  class="option-icon change"
                  @click="editKnowledge(scope.row)"
                >
                  修改
                </div>
                <!-- <el-button
                  @click="handleClick(scope.row)"
                  type="text"
                  size="small"
                  >查看</el-button
                >
                <el-button type="text" size="small">编辑</el-button> -->
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination-box">
          <el-pagination
            background
            layout="total, prev, pager, next"
            :page-size="searchData.pageSize"
            :total="total"
            @current-change="pageCurrentChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <!--新增知识库弹窗-->
    <el-dialog
      :title="knowDialogTitle == 'edit' ? '编辑' : '新增'"
      class="add-event-dialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="knowlVisible"
    >
      <el-form
        ref="knowForm"
        :model="knowForm"
        :rules="knowFormRules"
        label-width="100px"
      >
        <el-form-item label="上传文件" prop="file_id">
          <div>
            <upload-attach
              style="margin-left: 10px"
              @upload-success="uploadSuccess"
            />
          </div>
          <!-- <el-input v-model="knowForm.file_id"></el-input> -->
        </el-form-item>
        <el-form-item label="文件名称" prop="file_name">
          <el-input v-model="knowForm.file_name"></el-input>
        </el-form-item>
        <el-form-item label="文件代号" prop="file_code">
          <el-input v-model="knowForm.file_code"></el-input>
        </el-form-item>
        <el-form-item label="所属类型" prop="type_id">
          <el-input v-model="knowForm.type_name" disabled></el-input>
        </el-form-item>
        <el-form-item label="版本号" prop="version">
          <el-input v-model="knowForm.version"></el-input>
        </el-form-item>
        <el-form-item label="备注1">
          <el-input
            type="textarea"
            :rows="4"
            v-model="knowForm.remark1"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注2">
          <el-input
            type="textarea"
            :rows="4"
            v-model="knowForm.remark2"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleKnowDialogCancel">取 消</el-button>
        <el-button type="primary" @click="knowFormSubmitBtn('knowForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <video-dialog v-if="videoSrc" :src="videoSrc" @close="videoSrc = null"/>
  </div>
</template>

<script>
// import TreeRender from "@/components/treeOptions.vue";
import knowledgeApi from "@/apis/overview/knowledge.js";
import UploadAttach from "@/components/UploadAttach.vue";
import VideoDialog from "@/components/VideoDialog.vue";

import { exportFile } from "@/utils/index.js";
export default {
  components: { UploadAttach, VideoDialog },
  name: "knowledge",
  data() {
    return {
      value: "",
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      firstKnowType: [],
      secondKnowType: [],
      thirdKnowType: [],
      thisfirstTypeId: "",
      thissecondTypeId: "",
      thisthirdTypeId: "",
      thisfirstTypeName: "",
      thissecondTypeName: "",
      thisthirdTypeName: "",
      knowForm: {},
      knowFormRules: {
        file_code: [
          { required: true, message: "请输入文件代号", trigger: "change" },
        ],
        file_name: [
          { required: true, message: "请输入文件名称", trigger: "change" },
        ],
        file_id: [{ required: true, message: "请上传文件", trigger: "change" }],
        version: [
          { required: true, message: "请输入版本号", trigger: "change" },
        ],
        type_id: [
          { required: true, message: "请输入所属分类", trigger: "change" },
        ],
      },
      searchData: {
        type_id: "",
        keywords: "",
        pageNum: 1,
        pageSize: 10,
      },
      knowDialogTitle: "add",
      knowlVisible: false,
      tableData: [],
      total: 0,
      videoSrc: ''
    };
  },
  created() {
    this.getKnowTypeList(0, "first");
    // this.getKnowInfoList();
  },
  mounted() {},
  methods: {
    uploadSuccess(data) {
      console.log("data", this.knowForm);
      console.log("data", data);
      this.knowForm.file_id = data.id;
      this.knowForm.file_name = data.fileName;
    },
    // 搜索
    searchSub() {
      this.getKnowInfoList();
    },
    downloadHandle(row) {
      exportFile(
        process.env.VUE_APP_BASE_API + "/attach/download",
        { id: row.file_id },
        ""
      );
    },
    // 打开文件
    openFile(row) {
      let url = process.env.VUE_APP_BASE_API + "/attach/download?id=" + row.file_id
      switch(row.file_type) {
        case 1:
          this.videoSrc = url
          break;
        case 2:
          this.$imageView([url]) 
          break;
        default: 
          window.open(url);
      }
    },
    // 知识类型加载
    getKnowTypeList(id, type, auto) {
      knowledgeApi.gettKnowTypeList({ parent_id: id }).then((res) => {
        if (res.code == "200") {
          let resList = res.data;
          this[type + "KnowType"] = resList;
          if (auto != "default") {
            this.searchData.type_id = id == 0 ? "" : id;
            this.getKnowInfoList();
          }
          if (resList && resList.length) {
            // this["this" + type + "TypeId"] = resList[0].id;
            if (type == "first") {
              this.getKnowTypeList(resList[0].id, "second", "default");
            }
            // if(type == 'second') {
            //   this.getKnowTypeList(resList[0].id, 'third')
            // }
          }
        } else {
          this[type] = "";
        }
      });
    },
    // 获取知识内容列表
    getKnowInfoList() {
      knowledgeApi.getKnowInfoList(this.searchData).then((res) => {
        if (res.code == "200") {
          let resData = res.data;
          let list = resData.list;
          if (list && list.length) {
            this.tableData = list;
          } else {
            this.tableData = [];
          }
          this.total = resData.total ? resData.total : 0;
        } else {
          this.tableData = [];
          this.total = 0;
          this.$message.error(res.msg);
        }
      });
    },
    typeClick(row, type) {
      let id = row.id;
      let name = row.name;
      this["this" + type + "TypeId"] = id;
      this["this" + type + "TypeName"] = name;
      if (type == "first") {
        this["thissecondTypeId"] = "";
        this["thisthirdTypeId"] = "";
        this["thissecondTypeName"] = "";
        this["thisthirdTypeName"] = "";
        this.thirdKnowType = [];
      } else if (type == "second") {
        this["thisthirdTypeId"] = "";
        this["thisthirdTypeName"] = "";
      }
      this.getKnowTypeList(id, type == "first" ? "second" : "third");
    },
    // 翻页
    pageCurrentChange(val) {
      this.searchData.pageNum = val;
      this.getKnowInfoList();
    },
    handleKnowDialogCancel() {
      this.knowlVisible = false;
    },
    addKnowledge() {
      if (
        this.thisfirstTypeId ||
        this.thissecondTypeId ||
        this.thisthirdTypeId
      ) {
        let typeid = "";
        let typeName = "";
        if (this.thisfirstTypeId) {
          typeid = this.thisfirstTypeId;
          typeName = this.thisfirstTypeName;
        }
        if (this.thissecondTypeId) {
          typeid = this.thissecondTypeId;
          typeName = this.thissecondTypeName;
        }
        if (this.thisthirdTypeId) {
          typeid = this.thisthirdTypeId;
          typeName = this.thisthirdTypeName;
        }

        this.knowForm = {
          file_code: "",
          file_name: "",
          file_id: "",
          type_id: typeid,
          type_name: typeName,
          version: "",
          remark1: "",
          remark2: "",
          id: undefined,
        };
        this.knowDialogTitle = "add";
        this.knowlVisible = true;
      } else {
        this.$message.error("请先选择一个知识库分类！");
      }
    },
    // 三级选择变动
    thredSelChange(val) {
      this.thisthirdTypeId = val;
      let obj = this.thirdKnowType.find((ele) => {
        return ele.id == val;
      });
      this.thisthirdTypeName = obj.name;
      this.searchData.type_id = val;
      this.getKnowInfoList();
    },
    // 删除知识库内容
    delKnowledge(id) {
      this.$confirm("确定要删除该知识库内容吗？", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          knowledgeApi.delKnowInfo({ id: id }).then((res) => {
            if (res.code == 200) {
              this.$message.success("删除成功！");
              this.getKnowInfoList();
            } else {
              this.$message.error(res.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 编辑知识库内容
    editKnowledge(row) {
      knowledgeApi.gettKnowTypeDetail({ id: row.type_id }).then((res) => {
        if (res.code == "200") {
          this.knowDialogTitle = "edit";
          this.knowForm = row;
          this.knowForm.type_name = res.data.name;
          this.knowlVisible = true;
        }
      });
      // console.log(res)
      // this.knowForm.type_name = row.type_id;
      // this.knowForm = row;
      // this.knowDialogTitle = "edit";
      // this.knowlVisible = true;
    },
    // 提交知识库
    knowFormSubmitBtn(formname) {
      this.$refs[formname].validate((valid) => {
        if (valid) {
          let dataPost = this.knowForm;
          (this.knowDialogTitle == "edit"
            ? knowledgeApi.updatetKnowInfo(dataPost)
            : knowledgeApi.addKnowInfo(dataPost)
          ).then((res) => {
            if (res.code == "200") {
              this.$message.success(
                this.knowDialogTitle == "edit" ? "修改成功！" : "新增成功！"
              );
              this.knowlVisible = false;
              this.getKnowInfoList();
            }
          });
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.page-container {
  .page-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 58px;
    width: 100%;
    padding: 0 30px;
    background: #f9f9f9;
    .left {
      display: flex;
      .back {
        display: flex;
        align-items: center;
        height: 100%;
        padding: 0 20px;
        cursor: pointer;
        img {
          width: 30px;
          height: 20px;
        }
      }
      .text {
        display: flex;
        align-items: center;
        margin-left: 17px;
        font-size: 26px;
        color: #111434;
        font-weight: 400;
      }
    }
    .s-input {
      width: 270px;
      height: 34px;
      background: #f9f9f9;
      border: 1px solid #c6ccd8;
      border-radius: 17px;
      display: flex;
      align-items: center;
      padding: 0 18px;
      input {
        height: 100%;
        flex: 1;
        border: none;
        outline: none;
        font-size: 16px;
        color: #a8adb7;
        background: transparent;
      }
      img {
        width: 21px;
        height: 21px;
        margin-left: 8px;
        cursor: pointer;
      }
    }
  }
  .page-first-tabs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px 0 84px;
    background: #f9f9f9;
    box-shadow: 0px 3px 8px 0px rgba(122, 128, 159, 0.1);
    border-bottom: 1px solid #e4e4e4;
    .tabs-box {
      ul {
        display: flex;
        li {
          cursor: pointer;
          font-size: 24px;
          color: #505971;
          display: block;
          padding: 13px 42px;
          &.active {
            color: #111434;
            background: #e5ecfa;
            border-bottom: 4px solid #4181ff;
          }
          &:hover {
            color: #111434;
            background: #e5ecfa;
          }
        }
      }
    }
    .add-btn {
      cursor: pointer;
      img {
        width: 40px;
        height: 40px;
      }
    }
  }
  .page-content {
    background: linear-gradient(0deg, #e7e9f2 0%, #e7e9f2 100%);
    display: flex;
    overflow: hidden;
    .left {
      width: 188px;
      min-height: calc(100vh - 198px);
      background: #f2f3f7;
      box-shadow: 0px 3px 31px 1px rgba(95, 99, 115, 0.25);
      padding: 20px;
      .second-search-ul {
        li {
          cursor: pointer;
          font-size: 18px;
          color: #000;
          border-radius: 3px;
          width: 100%;
          height: 50px;
          line-height: 50px;
          text-align: center;
          background: #fff;
          margin-bottom: 20px;
          border: 1px solid #C1C8D7;
          background: linear-gradient(0deg, #D4DBE8 0%, #F8F9FB 100%);
          &.active {
            color: #fff;
            background: linear-gradient(0deg, #185de8 0%, #4885ff 100%);
          }
        }
      }
    }
    .table-list {
      flex: 1;
      padding: 17px 40px;
      .search-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        
        .add-btn {
          cursor: pointer;
          img {
            height: 40px;
            width: 40px;
          }
        }
      }
      .table-title {
        margin: 10px 0;
        h2 {
          font-size: 24px;
          font-weight: 400;
          text-decoration: underline;
          color: #111434;
        }
        .bread {
          color: #111434;
          font-size: 24px;
          font-weight: 400;
          text-decoration: none;
        }
      }
      .search-thred-box {
        margin-bottom: 10px;
        /deep/.el-input__inner {
          background: transparent;
          font-size: 18px;
          border: 1px solid #a8adb7;
        }
      }
      .table-box {
        .option-icon {
          width: 36px;
          height: 36px;
          display: inline-block;
          text-indent: -999px;
          overflow: hidden;
          cursor: pointer;
          &.del {
            background: url("../../../../assets/images/del_btn.png") center
              no-repeat;
            margin-right: 3px;
            &:hover {
              background: url("../../../../assets/images/del_btn_a.png") center
                no-repeat;
              background-size: 100%;
            }
            background-size: 100%;
          }
          &.change {
            background: url("../../../../assets/images/change_btn.png") center
              no-repeat;
            &:hover {
              background: url("../../../../assets/images/change_btn_a.png")
                center no-repeat;
              background-size: 100%;
            }
            background-size: 100%;
          }
        }
        /deep/ .el-table {
          thead {
            th {
              background: #d8dcea;
              font-size: 16px;
              color: #505971;
            }
          }
          tbody {
            td {
              font-size: 18px;
              color: #111434;
            }
          }
        }
      }
      .pagination-box {
        padding: 10px 0;
        text-align: right;
      }
    }
  }
}
.btn-text {
  font-size: 18px;
}
.play-video {
  cursor: pointer;
}
input::-webkit-input-placeholder {
  color: #a8adb7;
}
input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #a8adb7;
}
input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #a8adb7;
}
input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #a8adb7;
}
::v-deep {
  .el-button--text {
    color: #285FE3;
    text-decoration: underline;
  }
  .el-scrollbar__wrap {
    background: #E6EDFB;
  }
  .el-select-dropdown {
    background: #E6EDFB;
  }
  
}
/deep/.el-select-dropdown__empty {
  background: #E6EDFB;
}
a {
  color: #285FE3;
}
.el-table {
  background-color: transparent;
}
/deep/.el-table tr {
  position: relative;
  background: #ffffff;
  &.current-row,
  &.hover-row,
  &:hover {
    background-color: #e6edfb;
    td {
      position: relative;
      transition: none;
      background-color: #e6edfb;
      &:first-child {
        &::before {
          content: "";
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          width: 3px;
          background-color: rgb(65, 129, 255);
        }
      }
    }
  }
}
</style>
